<template>
  <div class="right-loquatCulture">
    <a-icon type="left-circle" class="left-btn" @click="pre" v-if="allList&&allList.length>1" />
    <a-icon type="right-circle" class="right-btn" @click="next" v-if="allList&&allList.length>1" />
    <div class="text">
      <!-- 余杭栽培枇杷历史悠久，据史书记载，早在隋代就开始种植枇杷，
      已有1400多年的历史！宋代，苏东坡在杭州任刺史，有“客来茶罢空无有，
      卢橘微黄尚带酸”，张嘉甫问曰：“卢橘是何物也”，答曰：“枇杷是矣”。 -->
      {{ description }}
    </div>
    <div :class="isHall ? 'img-content1' : 'img-content'">
      <template v-for="(item, index) in imgList1">
        <div :key="index" class="img">
          <div class="small" @click="showBig(index)">
            <div class="big" v-if="showIndex === index && isShow">
              <img :src="item" alt="" />
              <a-icon type="caret-down" style="color: #fff; margin-top: -3.9px" />
            </div>
            <img :src="item" alt="" />
          </div>
        </div>
      </template>
    </div>
  </div>
</template>
<script>
import { queryCulralHistorydp } from '@/api/dashboards'
export default {
  props: {
    isHall: {
      type: Number,
    },
  },
  data() {
    return {
      isShow: false,
      showIndex: undefined,
      description: '',
      imgList: [],
      imgList1: [],
      allList: [],
      nowShow: 0,
    }
  },
  watch: {
    isHall: {
      immediate: true,
      handler: function (val) {
        if (val) {
        }
      },
    },
  },
  created() {},
  mounted() {
    this.queryCulralHistorydp()
  },
  methods: {
    async queryCulralHistorydp() {
      let res = await queryCulralHistorydp()
      if (res.result && res.result.length) {
        this.allList = res.result
        this.nowShow = 0
        this.getData(this.nowShow)
      }
    },
    pre() {
      this.nowShow--
      if (this.nowShow < 0) {
        this.nowShow = 0
      }
      this.getData(this.nowShow)
    },
    next() {
      this.nowShow++
      let max = this.allList.length - 1
      if (this.nowShow > max) {
        this.nowShow = max
      }
      this.getData(this.nowShow)
    },
    getData(nowIndex) {
      this.description = this.allList[nowIndex].description && this.allList[nowIndex].description
      if (this.description.length > 100) {
        this.description = this.description.substr(0, 100) + '...'
      }
      this.imgList = this.allList[nowIndex].certificateImgUrls && this.allList[nowIndex].certificateImgUrls.split(',')
      this.imgList1 = this.imgList.map((item) => {
        return `${window._CONFIG['domainName']}/${item}`
      })
    },
    showBig(index) {
      this.isShow = !this.isShow
      this.showIndex = index
    },
  },
}
</script>
<style lang="less" scoped>
.right-loquatCulture {
  width: 360px;
  height: 285px;
  color: #fff;
  font-weight: 300;
  margin-top: -10px;
  background: url('../../assets/history.png') no-repeat;
  background-size: 100% 100%;
  position: relative;
  .left-btn {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 5%;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
  }
  .left-btn:hover,
  .right-btn:hover {
    color: #fff;
  }
  .right-btn {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    right: 2%;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
  }
  .text {
    margin: 0px 0 0 128.5px;
    line-height: 28px;
    padding-top: 25px;
    width: 20px;
    height: 234px;
    writing-mode: vertical-lr; /*从左向右 从右向左是 writing-mode: vertical-rl;*/
    -webkit-writing-mode: vertical-rl;
    writing-mode: tb-lr; /*IE浏览器的从左向右 从右向左是 writing-mode: tb-rl；*/
  }
  .img-content {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    position: absolute;
    bottom: -10%;
    .img {
      .small {
        position: relative;
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
        .big {
          position: absolute;
          top: -310%;
          left: -100%;
          display: flex;
          flex-direction: column;
          img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
          }
        }
      }
    }
  }
  .img-content1 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    position: absolute;
    bottom: -3%;
    .img {
      .small {
        position: relative;
        img {
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
        .big {
          position: absolute;
          top: -310%;
          left: -100%;
          display: flex;
          flex-direction: column;
          img {
            width: 120px;
            height: 120px;
            border-radius: 50%;
          }
        }
      }
    }
  }
}
</style>